<div class="main_div">
  <div class="title_text margin_bottom_30 text_center">{{vm.header}}</div>
  <div class="middle_hadoop_div margin_bottom_10">
    <div>
      <span>{{::vm.securityTypeLabel}}</span>
    </div>
    <div class="margin_bottom_15">
      <label for="kerberosSubType" class="margin_bottom_5 text_left">{{::vm.subTypeLabel}}</label>
      <select-box id="kerberosSubType" type="vm.data.model.kerberosSubType" options="vm.subTypes" on-select="vm.onSelectSubType(value)"></select-box>
    </div>
    <div ng-if="vm.kerberosSubTypes.PASSWORD === vm.data.model.kerberosSubType">
      <div class="margin_bottom_15 auto_overflow">
        <credentials username-label="vm.authUserLabel" username="vm.data.model.kerberosAuthenticationUsername" password-label="vm.authPasswordLabel" password="vm.data.model.kerberosAuthenticationPassword"></credentials>
      </div>

      <div ng-if="vm.data.connectedToRepo" class="margin_bottom_15 auto_overflow">
        <credentials username-label="vm.impersonateUserLabel" username="vm.data.model.kerberosImpersonationUsername" password-label="vm.impersonatePasswordLabel" password="vm.data.model.kerberosImpersonationPassword"></credentials>
      </div>
    </div>
    <div ng-if="vm.kerberosSubTypes.KEYTAB === vm.data.model.kerberosSubType">
      <div class="margin_bottom_15">
        <label for="authUser" class="margin_bottom_5 text_left">{{::vm.authUserLabel}}</label>
        <input id="authUser" type="text" ng-model="vm.data.model.kerberosAuthenticationUsername" autofocus/>
      </div>
      <div class="margin_bottom_15">
        <browse label="vm.keytabAuthPathLabel" model="vm.keytabAuthenticationFile"></browse>
      </div>
      <div ng-if="vm.data.connectedToRepo" class="margin_bottom_15">
        <label for="impUser" class="margin_bottom_5 text_left">{{::vm.impersonateUserLabel}}</label>
        <input id="impUser" type="text" ng-model="vm.data.model.kerberosImpersonationUsername" autofocus/>
      </div>
      <div ng-if="vm.data.connectedToRepo" class="margin_bottom_15">
        <browse label="vm.keytabImpersonatePathLabel" model="vm.keytabImpersonationFile"></browse>
        <a href="" ng-click="vm.onClearImpersonation()">clear</a>
      </div>
    </div>
  </div>
  <controls buttons="vm.buttons" help-link="vm.helpLink" data="vm.data"></controls>
</div>
